
<div class="wrapper wrapper-content page-heading animated fadeInRight">
    <div class="row">
        <div class="col-lg-9">
            <div class="tabs-container">
                <ul class="nav nav-tabs" id="tab-list-2">
                    <li class="links active" id="search-link"><a href="#search" role="tab" data-toggle="tab">Report</a></li>
                </ul>
                <div class="tab-content">
                   <div id="search" class="tab-pane active">
                        <div class="panel-body">
                            <div class="ibox-title" style="border: none;">
                              <h5 style="color: #00afef"><i>Meter Tracking</i></h5>
                            </div>
                           <div class="ibox-content">
                            <form class="form-horizontal" id="mr_report">
                             <?php foreach ($zone1 as $key): ?>
                              <div class="form-group" style="display: <?php echo ($key->enable_flag == 'N' ? 'none' : ''); ?>">
                                      <label class="col-lg-3 control-label"><?php echo $key->field_label; ?></label>
                                  <?php endforeach;?>
                                  <div class="col-lg-7">
                                    <select name="area" class="form-control chosen">
                                      <option value="all"></option>
                                    <?php foreach ($zone as $key): ?>
                                        <option value="<?php echo $key->zone_value_name; ?>"><?php echo $key->zone_value_name; ?></option>
                                    <?php endforeach;?>
                                    </select>
                                  </div>
                              </div>
                              <div class="form-group">
                                <label class="col-lg-3 control-label">Account Number</label>
                                  <div class="col-lg-7">
                                    <input type="text" name="account_number" class="form-control">
                                  </div>
                              </div>
                              <div class="form-group">
                                <label class="col-lg-3 control-label">Account Name</label>
                                  <div class="col-lg-7">
                                    <input type="text" name="account_name" class="form-control">
                                  </div>
                              </div>
                              <div class="form-group">
                                <label class="col-lg-3 control-label">Meter Serial</label>
                                  <div class="col-lg-7">
                                    <input type="text" name="meter_serial" class="form-control">
                                  </div>
                              </div>
                               <div class="form-group">
                                <label class="col-lg-3 control-label">Installed Date</label>
                                  <div class="col-lg-7">
                                    <input type="text" name="install_date" class="form-control">
                                  </div>
                              </div>
                               <div class="form-group">
                                <label class="col-lg-3 control-label">Months Used</label>
                                  <div class="col-lg-7">
                                    <input type="text" name="month_used" class="form-control">
                                  </div>
                              </div>
                               <div class="form-group">
                                    <label class="col-sm-2 control-label"></label>
                                     <div class="col-sm-10">
                                       <div class="row">
                                       <div class="col-md-9">
                                       <p class="text-center">
                                        <button class="btn btn-primary btn-outline btn-md m-t-n-xs" id="get-status-mr" type="button"><i class="fa fa-check fa-fw"></i> Get Status</button></p>
                                        </div>
                                      </div>
                                     </div>
                                  </div>
                             </form>
                           </div><!-- END OF IBOX CONTENT -->
                           <div id="result">
                              <div class="ibox-content">
                                <div class="row">
                                    <div class="col-xs-9">
                                      <div class="btn-group">
                                          <a id="to_pdf" href="#" class="btn btn-link" ><i class="fa fa-file-pdf-o fa-fw"></i> <small>Export as PDF</small></a>
                                          <a id="to_excel" href="#" class="btn btn-link" ><i class="fa fa-file-excel-o fa-fw"></i> <small>Export as Excel</small></a>
                                      </div>
                                    </div>
                                </div>
                             </div><!-- END OF IBOX CONTENT -->
                             <br>
                             <div class="horizontal-slide">
                              <div class="table-responsive">
                              <table class="dataTables table table-bordered table-hover" id="tbl_org" style="width:100%">
                               <!-- <table class="footable table table-bordered table-hover"> -->
                                <thead>
                                  <tr>
                                    <th>Zone</th>
                                    <th>Customer</th>
                                    <th>Meter Serial</th>
                                    <th>Installed Date</th>
                                    <th>Months Used</th>
                                  </tr>
                                </thead>
                                <tbody id="result-table">
                                </tbody>
                              </table>
                                <!-- <table data-limit-navigation="5" data-page-size="20" data-filter="#filter" data-page-navigation=".pagination" class="footable table table-bordered table-hover" id="tbl_org" style="width:100%">
                                                               <table class="footable table table-bordered table-hover">
                                <thead>
                                  <tr>
                                    <th data-type="alpha">Area</th>
                                    <th data-type="alpha">Customer</th>
                                    <th data-type="numeric">Meter Serial</th>
                                    <th data-type="alpha">Installed Date</th>
                                    <th data-type="numeric">Months Used</th>
                                  </tr>
                                </thead>
                                <tbody id="result-table">
                                  <tr>
                                  </tr>
                                </tbody>
                                <tfoot >
                                    <tr>
                                        <td colspan="11" style='border: none !important;'>
                                            <ul class="pagination pull-left"></ul>
                                        </td>
                                    </tr>
                                </tfoot>
                                                              </table> -->
                              </div>
                            </div>
                           </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- END of class row-->
</div>
<script>
      $(document).ready(function(){
        $(".chosen").chosen({width:"100%;"});
        $('#mr_report').keydown(function (e) {
          if (e.which == 13) {
            $('#get-status-mr').trigger('click');
            return false;
          }
        });

        $('#data_1 .input-daterange').datepicker({
            keyboardNavigation: false,
            forceParse: false,
            autoclose: true,
            format: "dd-M-yy"
        });
        $('#to_excel').hide();  $('#to_pdf').hide();

        // $('.footable').footable();
       $('#summernote').summernote({
          disableDragAndDrop: true,
          shortcuts: false,
          height: 200,
          placeholder: 'write here...',
          toolbar: [
            ['para', ['ul', 'ol']]
          ]
        });

       $('.dataTables').DataTable( {
                "uorder": [[ 1, "desc" ]],
                "columnDefs": [ {
                  "targets": 'no-sort',
                  "orderable": false,
            } ],
            "sDom": 'tip'
      });

        $('#get-status-mr').click(function(){
          $('.dataTables').dataTable().fnDestroy();
          $('#result-table').html('');
                  $.ajax({
                      type: "POST",
                      url: "<?php echo base_url($this->session->userdata('forajax')); ?>/get_status",
                      data: $('#mr_report').serialize(),
                      dataType: 'json',
                      success: function(data){
                         $('#get-status').removeAttr('disabled');
                          var tmp = "";
                          console.log(data.length);
                          if(data.length == 0){
                             notifymsg('error','No Result');
                             
                             $('#to_excel').hide();
                             $('#to_pdf').hide();
                              $('#search_values').html('');
                              $('#search_values').hide();
                          }else{
                            var c = 0;
                            $.each(data,function(i,item){
                              tmp += '<tr><td>'+ data[i].area +'</td><td>'+ data[i].account_name +'</td><td align="right">'+ data[i].serial_number +'</td><td align="right">'+ data[i].install_date +'</td><td align="right">'+ data[i].month_used +'</td></tr>'
                              c++;
                            });
                            notifymsg('success','Record Found '+c);
                            $('#result-table').html(tmp).trigger('footable_redraw');
                            $('#to_excel').attr('href','<?php echo base_url($this->session->userdata("forajax")); ?>/gen_excel?account_number='+$('input[name=account_number]').val()+'&account_name='+$('input[name=account_name]').val()+'&meter_serial='+$('input[name=meter_serial]').val()+'&area='+$('select[name=area]').val()+'&install_date='+$('input[name=install_date').val()+'&month_used='+$('input[name=month_used').val());
                            $('#to_pdf').attr('href','<?php echo base_url($this->session->userdata("forajax")); ?>/gen_pdf?account_number='+$('input[name=account_number]').val()+'&account_name='+$('input[name=account_name]').val()+'&meter_serial='+$('input[name=meter_serial]').val()+'&area='+$('select[name=area]').val()+'&install_date='+$('input[name=install_date').val()+'&month_used='+$('input[name=month_used').val());
                            //$('#to_excel').show();
                            //$('#to_pdf').show();
                          }
                          $('#result').show();
                           $('.dataTables').DataTable( {
                                         "order": [[ 1, "desc" ]],
                                        "columnDefs": [ {
                                          "targets": 'no-sort',
                                          "orderable": false,
                                    } ],
                                    "sDom": 'lTtip',
                                    "tableTools": {
                                          "aButtons": [{
                                                          "sExtends": "copy",
                                                          "sButtonText": "Copy to clipboard"
                                                      },
                                                      {
                                                          "sExtends": "xls",
                                                          "sButtonText": "Export to Excel"
                                                      }],
                                          "sSwfPath": "<?php echo base_url() ?>assets/js/plugins/dataTables/swf/copy_csv_xls_pdf.swf"
                                      }
                              });
                      },complete: function() {
                         $('#get-status-mr').removeAttr('disabled');
                      },
                      beforeSend: function(){
                         $('#get-status-mr').attr('disabled',true);
                         //$('#result').hide();
                      }
                    });

        });




 
      });
</script>